<template>
  <div class="song-audio">
    <audio id="player" :src="url" controls="controls"
           @canplay="startPlay" @ended="end" preload="true"
    >

    </audio>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';

  export default {
    name: "SongAudio",
    computed:{
      ...mapGetters([
        'id',
        'url',
        'isPlay'
      ])
    },
    watch:{
      isPlay:function() {
        this.togglePlay()
      }
    },
    methods:{
      startPlay(){
      //获取链接后准备播放
        let player = document.querySelector('#player')
      //  开始播放
        player.play()
      },
      end(){
        this.isPlay = false
      },
    //  开始，暂停
      togglePlay(){
        let player = document.querySelector('#player')
        if(this.isPlay){
          // console.log(this.isPlay)
          try {
            player.play()
          }catch (e) {

          }
        }else {
          // console.log(this.isPlay)
          player.pause()
        }
      }
    }
  }
</script>

<style scoped>
  .song-audio{
    display: none;
  }
</style>
